import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { useState, useEffect } from 'react'
import { Editor, Toolbar } from '@wangeditor/editor-for-react'

function MyEditor({ setHtml, html }) {
  // editor 实例
  const [editor, setEditor] = useState(null) 

  // 编辑器内容
  // const [html, setHtml] = useState('<p>hello</p>')

  // 工具栏配置
  const toolbarConfig = {
    toolbarKeys: [
      'bold',
      'italic',
      'underline',
      'fontSize',
      'indent',
      'lineHeight'
    ],
  }

  // 编辑器配置
  const editorConfig = {
    placeholder: '请输入内容...',
  }

  // 及时销毁 editor ，重要！
  useEffect(() => {
    return () => {
      if (editor == null) return
      editor.destroy()
      setEditor(null)
    }
  }, [editor])

  return (
    <div style={{ border: '1px solid #ccc', zIndex: 100 }}>
      <Toolbar
        editor={editor}
        defaultConfig={toolbarConfig}
        mode="default"
        style={{ borderBottom: '1px solid #ccc' }}
      />
      <Editor
        defaultConfig={editorConfig}
        value={html}
        onCreated={setEditor}
        onChange={(editor) => setHtml(editor.getHtml())}
        mode="default"
        style={{ height: '200px', overflowY: 'hidden' }}
      />
    </div>
  )
}

export default MyEditor